<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.0.js"></script>
</head>
<style>
    .box1 {
        width: 200px;
        height: 150px;
        margin: 0, auto;
        background-color: red;
        overflow: hidden;
    }

    .box1 img {
        width: 100%;
        height: 100%;
        border: 1px solid red;
    }

    .box1:hover {
        width: 300px;
        height: 230px;
        transition-property: width, height;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
    }

    .box1 h1 {

        margin-left: 20px;
        height: 50px;

    }

    .box2 {
        width: 300px;
        height: 50px;

    }
    .box3 {
        width: 400px;
        height: 250px;
        left: 450px;
        position: relative;
        background-color: aqua;
        overflow: hidden;
    }

    .box3 img {
        width: 100%;
        height: 100%;
    }

    .box3:hover .b-3 {
        margin-top: -63%;
        transition-timing-function: ease;
        transition-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .box3:hover .b-4 {
        margin-top: -45%;
        transition-timing-function: ease;
        transition-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    .box3:hover{
     width: 500px;
     height: 300px;
     transition-property: width, height;
     transition-timing-function:ease ;
     transition-duration: 1s;
    } 

    
    .b-3 {
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.2;
        position: absolute;
    }
    .b-4 {
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        line-height: 100%;
        color: black;
        position: absolute;
    }
    .box4{
        width:500px ;
        height:800px ;
        position:relative;
        left: 450px;
        margin-top: 100px;
        overflow: hidden;
    }
    .box5{
        width: 500px;
        display: flex;
        height: 800px;
        left: 450px;
    }
    .box4 img{
        width:500px;
        height:800px;
    }
    .b1{
        width:500px;
        height:800px;
    }
    .gjz{
        width: 200px;
        height: 200px;
        background-color: black;
        
    }
    @keyframes gjzdh{
        0%{
            width: 100px;
            height: 100px;
        }
        30%{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        70%{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        100%{
            width: 500px;
            height: 800px;
        }
    }
    
    .gjz:hover{
      animation-name:gjzdh ;
      animation-duration: 5s;
      animation-timing-function:ease;
      animation-delay: 1s;
      animation-play-state: running;
      animation-fill-mode: backwards;
    }
     
</style>

<body>
    <div class="box1">
        <img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt="">
    </div>
    <div class="box1">
        <div class="box2">
            <h1>我沈某人喜欢萝莉</h1>
        </div>
    </div>
    <div class="box3">
        <img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt="">
        <div class="b-3">

        </div>
        <div class="b-4">
            <span>我要小的就行</span>
        </div>
    </div>
    <div class="box4">
        <div class="box5">
            <div class="b1"><img src="../涂鸦示例图片/4fd8ddc4f85a8de8fad37a935e76a1a.jpg" alt=""></div>
            <div class="b1"><img src="../涂鸦示例图片/16193d4fed07c8b99e2d8eb243d2093.jpg" alt=""></div>
            <div class="b1"><img src="../涂鸦示例图片/bc45e3ad32d4fd17cecb371c00851c98_7601116601447367528.png" alt=""></div>
        </div>
    </div>
    <!-- 关键帧动画 -->
      <div class="gjz">
          
      </div>
    <script src="../JS/c-j.js"></script>
</body>

</html>